<style scoped>
/* .buddhism_music_search {
    min-height: 100vh;
} */

.history_cont {
    display: flex;
    flex-wrap: wrap;
}

.history_item {
    min-width: 1.46rem;
    height: 0.46rem;
    background: #E9EAEC;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    color: #333;
    margin-right:0.16rem;
    margin-bottom:0.16rem;
    padding:0 0.2rem;
}

.history_record {
    width: 7.5rem;
    background-color: #fff;
    min-height: 100%;
    padding:0 0.3rem;
    box-sizing: border-box;
    
}

.history_record h2 {
    font-family: PingFangSC-Medium;
    font-size: 0.34rem;
    color: #333;
    justify-content: space-between;
    display: flex;
    text-align: center;
    width:100%;
    padding:0.26rem 0;
}

.buddhism_music_search_cont{
    height: 100%;
    /* background-color: #fff; */
}


.buddhism_music_search .view-more {
    border-top:1px solid  #E9EAEC;
    font-size: 0.28rem;
    color: #666666;
    display: flex;
    align-items: center;
}



.buddhism_music_search .buddhism_title {
    font-family: PingFangSC-Medium;
    font-size: 0.28rem;
    color: #999999;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.7rem;
    padding: 0 15px;
    border-bottom:1px solid #eee;
}

.font-right {
    font-size: 0.24rem;
    color: #999;
}

.buddhism_search-tab {
    width:100%;
    display: flex;
    background-color: #fff;
    margin:0.2rem 0;
    height:1.02rem;
    border-top:0.01rem solid #eee;
    border-bottom: 0.01rem solid #eee;
}


.buddhism-search-tab-item {
    font-size: 0.3rem;
    color: #999;
    text-align: center;
    display: flex;
    flex:1;
    align-items: center;
    justify-content: center;
    height: 0.98rem;
    border-bottom:0.04rem solid #fff
}

.buddhism-search-tab-item.active {
    border-bottom:0.04rem solid #AB946C;
    color: #AB946C;
}

.article_serach .home-header {
    height: 1rem;
    width:100%;
    background-image: linear-gradient(-90deg, #B3A277 0%, #AB946C 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding:0 0.14rem 0 0.24rem;
}

.article_serach .home-index-search {
    width:6.2rem;
    height: 0.6rem;
    background-color:#fff;
    position: relative;
    
    box-sizing: border-box;
}

.home-index-search i.icon-sousuo{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left:0.28rem;
    color:#B2B2B2;
}


.home-index-search i.icon-guanbi {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:0.28rem;
    color:#B2B2B2;
}




.article_search_cancel {
    font-family: PingFangSC-Regular;
    font-size: 0.34rem;
    color: #FFF;
    min-width:0.7rem;
    height: 0.6rem;
    margin-left:0.2rem;
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buddhism_music_search .home-index-search input {
    border:none;
    width:100%;
    height: 0.6rem;
    font-size:0.28rem;
    padding:0 0.68rem 0 0.68rem;
    box-sizing: border-box;
    color:#666
}


.buddhism_music_search .buddhism_music {
    min-height: 100vh;
}

.buddhism_music_search .buddhism_cont_list {
    width:100%;
    padding:0 0.2rem 0;
    box-sizing: border-box;
    background-color: #fff;
    border-top:1px solid  #E3E3E3;
    border-bottom: 1px solid  #E3E3E3;

}



.buddhism_list_item {
    width:2rem;
    margin-right:0.12rem;
    
}


.buddhism_list_scroll {
    width:100%;
    overflow-x: auto;

}

.buddhism_list_scroll::-webkit-scrollbar { width: 0 !important; display: none }

.buddhism_list_item p {
    padding-top:0.14rem;
    line-height: 0.32rem;
    font-size:0.24rem;
}


.buddhism_list_item  .item_music_img {
    width:100%;
    height: 2rem;
    background-color:#eae8e3;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.buddhism_list_item .span_music {
    color:#fff;
    position: absolute;
    top:0.1rem;
    right: 0.1rem;
    font-size:0.22rem
}

.buddhism_list_item  .span_music i {
    font-size:0.16rem;
    margin-right:0.1rem;
}


.buddhism_list_item  img {
    width: 100%;
    height: auto;
}

.buddhism_list_item  .item_sutras_img {
    width:100%;
    height: 2.6rem;
    background-color:#eae8e3;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.buddhism_list_item  .item_sutras_img img{
    width:100%;
    height: 2.6rem;

}


.buddhism_music_search .buddhism_list {
    width:100%;
    background-color: #fff;
    padding:0 0.32rem 0;
    box-sizing: border-box;
    border-top:1px solid  #E3E3E3;
    border-bottom: 1px solid  #E3E3E3;
    margin-bottom:0.2rem;
}

.buddhism_title {
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    color: #333;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.8rem;
    margin-top:0.06rem;
}

.buddhism_title span {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    color: #999;
    display: flex;
    align-items: center;
}

.home-header {
    height: 1rem;
    width:100%;
    background-image: linear-gradient(-90deg, #B3A277 0%, #AB946C 100%);
    display: flex;
    justify-content: center;
    align-items: center
}

.home-index-search {
    width:7rem;
    height: 0.6rem;
    background-color:#fff;
    position: relative;
    
    box-sizing: border-box;
}



.home-index-search input {
    border:none;
    width:7rem;
    height: 0.6rem;
    font-size:0.28rem;
    padding:0 0.68rem 0 0.68rem;
    box-sizing: border-box;
    color:#666
}

</style>

<template>
    <div class="buddhism_music article_serach buddhism_music_search">
        <div class="home-header">
            <div class="home-index-search">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="歌曲名称" v-model="monasteryname">
                <i class="iconfont icon-guanbi" @click="clearFn()"></i>
            </div>

            <span class="article_search_cancel" @click="onClickLeft">取消</span>
        </div>

        <div class="buddhism_search-tab">
            <div class="buddhism-search-tab-item" :class="{'active': zindex == 0}" @click="switchFn(0)">全部</div>
            <div class="buddhism-search-tab-item" :class="{'active': zindex == 1}" @click="switchFn(1)">佛学歌曲</div>
            <div class="buddhism-search-tab-item" :class="{'active': zindex == 2}" @click="switchFn(2)">佛经念诵</div>
            <div class="buddhism-search-tab-item" :class="{'active': zindex == 3}" @click="switchFn(3)">寻师问法</div>
        </div>

        <!-- 历史记录 -->
        <div class="history_record" v-if="state">
            <!-- <i class="iconfont icon-guanbi"></i> -->
            <h2>历史搜索</h2>
            <div class="history_cont">
                <div class="history_item" v-for="(item, indexs) of dataList" :key="indexs"  @click="router(`/seek_master_details?id=${item.articleid}`)" v-if=" historySelect && indexs < Math.min(index, dataList.length)">{{ item.title }}</div>
                <div class="history_item" v-for="(item, indexs) of dataList" :key="indexs"  @click="router(`/music_pay?id=${item.musicid}`)"  v-if=" !historySelect && indexs < Math.min(index, dataList.length) " >{{ item.musicname }}</div>
            </div>
        </div>
        <!-- 历史记录end -->

        <div class="buddhism_music_search_cont" v-else>
            <div class="buddhism_list" v-if="zindex == 0 || zindex == 1">
                <h2 class="buddhism_title">佛学歌曲</h2>

                <div class="song-list-cont">
                    <van-cell :title="item.musicname.substr(0, 14)" v-for="(item, index) of musicListSearch" :key="index" :url="`/music_pay?id=${item.musicid}`">
                        <template slot="right-icon">
                            <i class="iconfont icon-bofangliang- font-right" style="font-size:0.3rem; margin-right:0.1rem"></i>
                            <span class="custom-text font-right">{{ item.visitnum}}次播放</span>
                            <i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i>
                        </template>
                    </van-cell>
                </div>

                <div class="view-more" @click="router('/song_list?type=music')" v-if="zindex == 0">
                    <van-cell title="查看更多歌曲" icon="search" >
                        <template slot="right-icon">
                            <i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i>
                        </template>
                    </van-cell>
                </div>
            </div>

            <!-- 分割线 -->

            <div class="buddhism_list" v-if="zindex == 0 || zindex == 2">
                <h2 class="buddhism_title">佛经念诵 </h2>

                <div class="song-list-cont">
                    <van-cell :title="item.musicname.substr(0, 14)" v-for="(item, index) of dhikrListSearch" :key="index" :url="`/music_pay?id=${item.musicid}`">
                        <template slot="right-icon">
                            <i class="iconfont icon-bofangliang- font-right" style="font-size:0.3rem; margin-right:0.1rem"></i>
                            <span class="custom-text font-right">{{ item.visitnum}}次播放</span>
                            <i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i>
                        </template>
                    </van-cell>
                </div>

                <div class="view-more" @click="router('/song_list?type=dhikr')" v-if="zindex == 0">
                    <van-cell title="查看更多佛经" icon="search">
                        <template slot="right-icon">
                            <i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i>
                        </template>
                    </van-cell>
                </div>

            </div>
            

            <div class="buddhism_cont_list" v-if="zindex == 0 || zindex == 3">
                <h2 class="buddhism_title" @click="router('/seek_master_search')">寻师问法 </h2>
                <van-cell :title="item.title" is-link v-for="(item, index) of articleListSearch" :key="index" :to="`/seek_master_details?id=${item.articleid}`"></van-cell>
                <!-- <van-cell title="缘起咒(丹真绒布仁波切)" is-link></van-cell> -->
                <div class="view-more" style="border-top:none" @click="router('/seek_master_search')" v-if="zindex == 0">
                    <van-cell title="查看更多解答" icon="search">
                        <template slot="right-icon">
                            <i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i>
                        </template>
                    </van-cell>
                </div>
            </div>
        </div>
        
        
    </div>
</template>
<script>
import {getResponse, getResponses} from "../api"
import { setTimeout } from 'timers';
export default {
    data(){
        return {
            historySelect:false,
            historyDate:'',
            state:true,
            index:1,
            zindex:0,
            musicList:[],
            dhikrList:[],
            articleList:[],
            musicListSearch:[],
            dhikrListSearch:[],
            articleListSearch:[],
            pagenum:1,
            pagesize:50,
            musicTotal:0,
            dhikrTotal:0,
            articleTotal:0,
            total:'',
            monasteryname:'',
            dataList:[]
        }
    },
    
    watch:{
        zindex() {
            this.monasteryname = ''

            let iarr = ['musicListSearch', 'dhikrListSearch', 'articleListSearch']

            if(this.zindex == 0) {
                this.dataList = this.musicListSearch
            } else {
                this.dataList = this[iarr[this.zindex-1]]
                
            }

            this.zindex <= 1 ? this.articleDetails(1) : ( this.zindex == 2 ? this.articleDetails(2) : this.getArticlelist())
            this.historySelect = this.zindex == 3
            
        },

        monasteryname() {
            if( this.zindex == 0) {
                this.pagenum=1
                
                this.articleDetails(1)
                this.articleDetails(2) 
                this.getArticlelist()

                this.state = this.monasteryname == ''
                return false;
            }

            this.zindex <= 1 ? this.articleDetails(1) : ( this.zindex == 2 ? this.articleDetails(2) : this.getArticlelist())

            this.state = this.monasteryname == ''
        }
    },

    methods:{
        searchFn(name) {
            this.monasteryname = name
            this.zindex <= 1 ? this.articleDetails(1) : ( this.zindex == 2 ? this.articleDetails(2) : this.getArticlelist())
        },

      
        switchFn(index){
            this.zindex = index
        },

        onClickLeft() {
            this.$router.go(-1)
        },

        clearFn() {
            this.monasteryname = ''
        },

        router(url) {
            this.$router.push(url)
        },

        //寺庙列表
        async articleDetails(type) {	
            let arr = ['music', 'dhikr']


            const data = await getResponses(`/fochina/query/musiclist/json`,{'musicname': this.monasteryname, 'musictype':type,'pagenum': this.pagenum, 'pagesize':this.pagesize})
            
            
            if(data.code === '0000') {
                if( this.zindex == 0) {
                    this[arr[type-1]+'ListSearch'] = data.data.slice(0,4)
                } else {
                    this[arr[type-1]+'ListSearch'] = data.data
                }

                this[arr[type-1]+'TotalSearch'] = data.total
            } else {
                console.log(data.error)
            }
        },

        async getArticlelist() {	
            const data = await getResponses(`/fochina/query/articlelist/json`,{'title': this.monasteryname, 'querytype':0, 'articletype':5, 'pagenum': this.pagenum, 'pagesize':this.pagesize})
            
            

            if(data.code === '0000') {
                if( this.zindex == 0) {
                    this.articleListSearch = data.data.slice(0,4)
                } else {
                    this.articleListSearch = data.data
                }

                this.total = data.total
            } else {
                console.log(data.error)
            }
        }
    },

    mounted(){
        setTimeout(()=>{
            this.index = 4
        },100)
    },

    created(){
        this.articleDetails(1)
        this.articleDetails(2)
        this.getArticlelist()
    }
}
</script>

